<template>
  <div class="history-container">
    <h3>审批历史</h3>
    <ul>
      <li v-for="record in pagedHistory" :key="record.id">
        <div class="record-row">
          <!-- 申请人左对齐 -->
          <div class="col approver">{{ record.approverName }}</div>
          <!-- 状态居中 -->
          <div class="col action">
            <span :class="`action-${record.action}`">{{ actionText(record.action) }}</span>
          </div>
          <!-- 时间右对齐 -->
          <div class="col time">
            <time>{{ new Date(record.timestamp).toLocaleString() }}</time>
          </div>
        </div>
        <!-- 意见左对齐 -->
        <p class="comment">意见: {{ record.comment }}</p>
      </li>
    </ul>
    <!-- 分页组件，只有数据超过10条时显示 -->
    <el-pagination
      v-if="props.application.history.length > pageSize"
      background
      layout="prev, pager, next"
      :total="props.application.history.length"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="handlePageChange"
      class="history-pagination"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import type { ReimbursementApplication } from '@/services/models'
const props = defineProps<{ application: ReimbursementApplication }>()
// 操作类型文本映射
const actionText = (action: string) =>
  ({ approve: '批准', reject: '驳回', submit: '提交', cancel: '撤销' })[action] || action

// 分页相关变量
const pageSize = 10 // 每页显示10条
const currentPage = ref(1) // 当前页
// 计算当前页要显示的审批历史
const pagedHistory = computed(() => {
  const start = (currentPage.value - 1) * pageSize
  const end = start + pageSize
  return props.application.history.slice(start, end)
})
// 页码切换处理
function handlePageChange(page: number) {
  currentPage.value = page
}
</script>

<style scoped>
ul {
  list-style-type: none;
  padding: 0;
}
li {
  border-left: 3px solid #ddd;
  padding: 10px 20px;
  margin-bottom: 15px;
  background: #fafafa;
}
/* 审批历史每一行采用grid布局，三列对齐 */
.record-row {
  display: grid;
  grid-template-columns: 1fr 80px 1fr; /* 左-中-右 */
  align-items: center;
  gap: 10px;
}
.col.approver {
  font-weight: bold;
  color: #222;
  justify-self: start; /* 申请人左对齐 */
}
.col.action {
  text-align: center;
  min-width: 60px;
  justify-self: center; /* 状态居中对齐 */
}
.col.time {
  font-size: 12px;
  color: #999;
  justify-self: end; /* 时间右对齐 */
}
.comment {
  margin: 8px 0 0;
  color: #555;
  text-align: left; /* 意见左对齐 */
}
.action-approve {
  color: #27ae60;
  font-weight: bold;
}
.action-reject {
  color: #c0392b;
  font-weight: bold;
}
.action-submit {
  color: #2980b9;
  font-weight: bold;
}
.action-cancel {
  color: #999;
  font-weight: bold;
}
/* 分页组件样式 */
.history-pagination {
  margin-top: 16px;
  text-align: center;
}
</style>
